<template>
  <div class="loading" v-if="isLoading">
    <svg-loading />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import SvgLoading from '../svg/SvgLoading.vue'

const isLoading = ref(false)

const isLoadingCpt = computed(() => isLoading.value)

const showLoading = (cb?: () => void) => {
  cb && cb()
  isLoading.value = true
}
const hiddenLoading = (cb?: () => void) => {
  cb && cb()
  isLoading.value = false
}

defineExpose({
  isLoadingCpt,
  showLoading,
  hiddenLoading
})
</script>

<style lang="less" scoped>
.loading {
  width: 50px;
  height: 50px;
  color: cornflowerblue;
}
</style>
